<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script> -->
    <script src="./zrender.js"></script>

    <title></title>
</head>

<body>
    <div id="container" style="height: 800px; width: 800px;"></div>


    <script>
        var zr = zrender.init(document.getElementById('container'));
        var rect = new zrender.Rect({
            shape: {
                x: 0,
                y: 100,
                width: 100,
                height: 200,
                r: [30],
            },
            style: {
                fill: 'red',
                stroke: 'none',
            },
            z: 1,
        });

        var circle = new zrender.Circle({
            shape: {
                cx: 200,
                cy: 100,
                r: 50.
            },
            style: {
                fill: '#153472',
                stroke: 'green',
                lineWidth:2,
            },
            z: 1,
        });
        var arc = new zrender.Arc({
            shape: {
                cx: 400,
                cy: 100,
                r: 50,
                startAngle:-35,
                clockwise:false,
            },
            style: {
                // fill: '#153472',
                stroke: 'green',
                lineWidth:20,
            },
            z: 1,
        });





        rect.animate('shape', true)
            .when(1000, { x: 100 })
            .when(2000, { x: 0 })
            .when(3000, { y: 100 })
            .when(4000, { y: 0 })
            .start();
        rect.on('click', function (e) {
            // console.log('我被点击了')
            window.open('http://yishao.top')

        });
        // var rect1 = new zrender.Rect({
        //     shape:{
        //         x:50,
        //         y:100,
        //         width:100,
        //         height:200,
        //     },
        //     style:{
        //         // fill:'red',
        //         stroke:'none',
        //     },
        //     z:10,
        // });



        // zr.add(rect1);
        zr.add(rect);
        zr.add(circle);
        zr.add(arc);

    </script>
</body>

</html>